<template>
  <div class="wrapper">
      <button @click="handler">{{ counter }}</button>
      <p>{{ message }}</p>
  </div>
</template>

<script>
// 导入 ref 函数
import { ref , watch } from 'vue';

export default {
  name:'Lion',
  // 选项 setup 是 组合式API 的入口
  setup(props,context){
    // 定义数据 
    const counter = ref( 1000 );
    // 函数 ref 接受一个内部值并返回一个响应式且可变的 Ref 实例。
    // Ref实例 仅有一个 `value` 属性(property)，它指向该内部值。
    const message = ref( '偶数' );

    // 定义方法
    function handler(){
        // 通过 Ref实例 的 value 属性来操控 counter 中的内部值
        counter.value++;
    }

    // 侦听 counter 的变化
    watch( () => counter.value , (curr,prev) => message.value = curr % 2 == 0 ? '偶数' : '奇数' );

    // 返回数据
    return {
        counter,
        message,
        handler
    }
  }
}
</script>

<style scoped>
.wrapper {
  margin: 15px;
  border: 1px solid #dedede;
  box-shadow: 0 0 20px -10px blue;
}
</style>